<template>
  <view class="index-page">
    <u-navbar
      title="账单明细"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <scroll-view
      class="scrool"
      :style="{ height: '1535rpx ' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view style="padding: 20rpx">
        <view class="card" v-for="(item, index) in state.list" :key="index">
          <view class="neirong">
            <view class="biaoti1"
              ><text>{{
               item.type_text
              }}账单</text></view
            >
            <view class="biaoti2"
              ><text
                :style="{
                  background: ['1', '5'].includes(item.type)
                    ? 'green'
                    : '#ff8f8f'
                }"
                >{{ item.memo }}</text
              ></view
            >
            <view class="biaoti3"
              ><text>{{ item.createtime }}</text></view
            >
            <view class="biaoti4"
              ><text
                :style="{
                  color: ['1', '5'].includes(item.type) ? 'green' : 'red'
                }"
                >{{ ['1', '5'].includes(item.type) ? '+' : '-'
                }}{{ item.money }}</text
              ></view
            >
          </view>
        </view>
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { getBalanceRecodeList } from '@/api/modules/user'
const state = reactive({
  status: 'loadmore',
  list: [] as any,
  page: 0
})

//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  getBalanceRecodeList({
    page: state.page,
    page_size: 30
  }).then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 30) state.status = 'nomore'
    else state.status = 'loading'
  })
}
bottomOut()
</script>
<style lang="less" scoped>
.scrool {
}
.card {
  height: 190upx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 10rpx;
  margin-top: 20rpx;
}

.neirong {
  margin-left: 50upx;
  width: 650upx;
  margin-right: 50upx;
}

.biaoti1 {
  font-size: 40upx;
}

.biaoti2 {
  font-size: 30upx;
  margin-top: 15upx;
  color: #666666;
  text {
    padding: 2rpx 10rpx;
    color: #fff;
    border-radius: 20rpx;
  }
}

.biaoti3 {
  font-size: 30upx;
  margin-top: 15upx;
  color: #666666;
}

.biaoti4 {
  width: 100%;
  font-size: 40upx;
  margin-top: -105upx;
  text-align: right;
  padding-right: 40upx;
  /* margin-left: 400upx; */
  color: #000000;
}
page {
  background-color: #f3f6fd;
  height: 100%;
}
.index-page {
  height: 100%;
}
</style>
